const path = require('path');

//导入html-webpack-plugin插件
//此插件的作用是把html也放在内存中和bundle.js文件类似，
//放在内存中用于提高页面的渲染速度，方便开发时的调试
const HtmlWebpackPlugin = require('html-webpack-plugin');

//webpack 配置文件
//注意:如果是在webstrom里，如果设置好之后，仍报错，把terminal窗口关闭，重新打开下
//貌似类似于环境变量，设置好需要重开窗口，重新加载

//webpack  安装两次，全局和本项目都安装
// npm i webpack -g //全局
// npm i webpack //本项目
module.exports = {
    mode:'development', //开发模式
    entry:path.resolve(__dirname, "src/index.js"),//要编译的文件
    output:{//输出文件
        path:path.resolve(__dirname, "dist"),
        filename:'bundle.js'
    },

// webpack-dev-server
// --open 自动打开页面
// --prot 8081  指定端口
// --contentBase src  打开指向的目录，默认是根目录，而index.html是在src目录下
// --hot 热更新，即增量更新，只重新编译修改部分，而不是重新整个编译，在大型项目中可以提高编译性能
// 在webpack4.0以前，通过配置文件来设置webpack-dev-server的时候，需要额外的配置webpack.HotModuleReplacemetnPlugin()
//     插件，但4.0以后，则不需要
    devServer: {
        open:true,
        port:8081,
        contentBase:'src',
        hot:true
    },
    plugins: [         //注册插件,并指定要放在内存的文件地址
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                //注意这里的loader是有顺序的，从右向左，先运行css-loader，再运行style-loader
                //类似于linux下面的命令管道 tailf -f xx | grep ss | ....
                test: /\.css$/,use:['style-loader','css-loader']
            },
            {
                //注意，这里是先处理less，然后是css,然后是style，注意顺序
                test:/\.less$/,use:['style-loader','css-loader','less-loader']
            },
            {
                //这里用于处理backgroud里的图片，当只有一个loader时，可以直接写字符串，无需数组
                //注意，当backgroud是一个http的图片地址，则不需要设置当前的loader
                //默认情况下，会把图片进行base64，但一般较小图片，可以base64,大图片则不需要，否则消耗性能
                //所以，limit参数设置小于多少字节的，进行base64 单位为字节
                //默认情况下是以当前图片的hash值做为图片名称，如果想保持原样，则再后面加[name].[ext]
                test:/\.(jpg|jpeg|bmp|gif|png)$/,use:'url-loader?limit=7000&name=[name].[ext]'
            },

            {
                //处理字体
                test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader?limit=7000&name=[name].[ext]'
            },
            {
                //es6新语法兼容处理，exclude为排除哪些目录不处理
                test:/\.js$/,use:'babel-loader',exclude:/node_modules/
            }
        ]
    }

}

